<script setup>
import { ref, computed } from 'vue';

const activeMenu = ref('1'); // 当前选中的菜单项

const dialogVisible = ref(false);
const bidding = ref(false);
const tenderer = ref(false);

const handleCommand = (command) => {
if (command === 'c') {
  // 根据需要打开登录对话框
  dialogVisible.value = true;
}
if(command === 'a'){
  bidding.value=true;
}
if(command === 'b'){
  tenderer.value=true
}
};

import AdminLogin from '@/views/AdminLogin.vue';
import BiddingRegister from './BiddingRegister.vue';
import TendererRegister from './TendererRegister.vue';

import { useRouter } from 'vue-router';
const router = useRouter();

</script>

<template>
    <div>
      <!-- 顶部图片 -->
      <header class="header-container">
  <div class="header-banner">
    <div class="logo-container">
      <p class="logo-text">药品在线招投标平台</p>
    </div>
  </div>
</header>

      <!-- 导航栏 -->
      <el-header class="header">
        <el-row type="flex" justify="space-around" align="middle">
          <el-col :span="16">
            <el-menu mode="horizontal" class="menu" :default-active="activeMenu">

              <el-menu-item index="1"><RouterLink to="/" class="router">首页</RouterLink></el-menu-item>
              <!-- <el-menu-item index="2"><RouterLink to="/news" class="router">最新资讯</RouterLink></el-menu-item> -->
              <el-menu-item index="3"><RouterLink to="/about" class="router">关于我们</RouterLink></el-menu-item>
              <el-dropdown @command="handleCommand">
        <el-menu-item index="4">登录</el-menu-item><el-icon class="el-icon--right"><arrow-down /></el-icon>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="a">招标用户登入</el-dropdown-item>
        <el-dropdown-item command="b">投标用户登入</el-dropdown-item>
        <el-dropdown-item command="c">管理员登入</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
            </el-menu>
          </el-col>
        </el-row>
      </el-header>
      <RouterView></RouterView>
  <AdminLogin v-model="dialogVisible"></AdminLogin>
  <BiddingRegister v-model="bidding"></BiddingRegister>
  <TendererRegister v-model="tenderer"></TendererRegister>
      <!-- 底部版权信息 -->
      <el-footer class="footer">
        <div class="footer-content">
          <span>&copy; 2025 版权所有 | ECUT</span>
        </div>
      </el-footer>
    </div>
  </template>

  <style scoped>
.header-container {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: linear-gradient(135deg, #1ab1e8 0%, #42d0f4 100%);
  padding: 0 20px;
}

.logo-container {
  text-align: center;
}

.logo-text {
  font-family: 'Arial', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.logo-text:hover {
  transform: translateY(-1px);
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .header-banner {
    height: 60px;
  }

  .logo-text {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
  }
}
  /* 顶部图片 */
  .top-image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
  }

  /* 导航栏样式 */
  .header {
    background-color: #D0D0D0;
    padding: 0 20px;
    color: white;
  }

  /* 导航栏容器 */
.menu {
  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 1000;
}

/* 导航栏滚动效果 - 当页面滚动时添加背景色和阴影 */
.menu.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* 菜单项基础样式 */
.menu .el-menu-item {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  padding: 0 24px;
  transition: all 0.3s ease;
  position: relative;
  height: 60px;
  line-height: 60px;
}

/* 菜单项悬停效果 */
.menu .el-menu-item:hover {
  color: #409EFF;
  background-color: rgba(64, 158, 255, 0.05);
  transform: translateY(-2px);
}

/* 菜单项悬停时的底部边框动画 */
.menu .el-menu-item::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background-color: #409EFF;
  transition: all 0.3s ease;
}

.menu .el-menu-item:hover::after {
  width: 100%;
  left: 0;
}

/* 激活状态的菜单项 */
.menu .el-menu-item.is-active {
  color: #409EFF;
  font-weight: 600;
  background-color: rgba(64, 158, 255, 0.05);
}

.menu .el-menu-item.is-active::after {
  width: 100%;
  left: 0;
}

/* 下拉菜单样式优化 */
.menu .el-submenu .el-submenu__title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  transition: all 0.3s ease;
}

.menu .el-submenu .el-submenu__title:hover {
  color: #409EFF;
}

.menu .el-submenu .el-submenu__icon-arrow {
  transition: transform 0.3s ease;
}

.menu .el-submenu:hover .el-submenu__icon-arrow {
  transform: rotateZ(180deg);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .menu .el-menu-item {
    font-size: 16px;
    padding: 0 16px;
    height: 50px;
    line-height: 50px;
  }

  .menu .el-submenu .el-submenu__title {
    font-size: 16px;
  }
}

  /* 底部版权信息 */
  .footer {
    background-color: #f1f1f1;
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
  }
  .footer {
  background-color: #f1f1f1;
  padding: 10px 0;
  text-align: center;
  font-size: 14px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10; /* 确保在页面内容上方 */
}

.footer-content {
  color: #555;
}
.router{
  text-decoration: none;
}
  </style>
